import React, { memo } from "react";
import { Layout } from "antd";
import FormComponent from "../../components/form";
import { LoginProp } from "../../type/login";
import { login } from "../../api/login";
import { useHistory } from "dva";
import { useStorage } from "../../untils/storeage";
import styles from "./index.module.css";

const { Content } = Layout;
const FormFiledList = [
  {
    type: "Input",
    name: "username",
    label: "用户名",
    required: true,
    message: "Please input your username!",
  },
  {
    type: "Password",
    name: "password",
    label: "密码",
    required: true,
    message: "Please input your password!",
  },
];
const App: React.FC = () => {
  const history = useHistory();
  const storage = useStorage(window.localStorage);
  const handleClickFormSuccess = async (res: LoginProp) => {
    const result = await login(res);
    storage.set("login", result);
    history.push("/bannerManage");
  };
  const handleClickFormFailed = (err: any) => {
    console.log(err, "err");
  };
  return (
    <Layout>
      <Content>
        <div className={styles.box}>
          <div className={styles.homeContainer}>
            <FormComponent
              FormFiledList={FormFiledList}
              formId={"basicFormId"}
              hasModal={true}
              Success={(res) => handleClickFormSuccess(res)}
              Failed={(err) => handleClickFormFailed(err)}
            ></FormComponent>
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default memo(App);
